<template>
    <div class="zonti">
        
        <div class="zontiright">
          
          <div v-if="login" class="rightform">
            <form  action="" style="width: 100%;height:100%">
              <div class="rightformhezitop">
                <div class="loginname">
                  手机号
                </div>
                <input v-model="form.account" style="width: 240px ;" placeholder="请输入用户名" />
              </div>
              <div class="rightformhezibottom">
                <div class="loginname">
                  密码
                </div>
                <input type="password" v-model="form.password" style="width: 240px ;" placeholder="请输入密码" />
              </div>
              <div class="formbutton">
                <el-button  @click="emit('login_off_new','0')" class="loginbutton01">
                  注册
                </el-button>
                <el-button @click="emit('login_off_new',form)"  class="loginbutton03"   type="primary ">
                  登录
                </el-button>
              </div>
            </form>
          </div>
          
          <div class="otherlogin">
            其他方式登录
          </div>
          <div class="loginicon">
            <div>
              <svg class="icon " style="width: 1.5rem;height: 1.5rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="789">
                <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="790">
                </path>
                <path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="791">
                </path>
              </svg>
                <a style="margin-left: 5px;">
                  微信登录
                </a>
            </div>
            <div>
              <svg class="icon " style="width: 1.5rem;height: 1.5rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="759">
                <path d="M512 0C229.224296 0 0 229.224296 0 512s229.224296 512 512 512 512-229.224296 512-512S794.775704 0 512 0zM801.261037 668.86163c-21.731556 18.640593-49.948444-61.345185-54.006519-49.038222-9.879704 29.923556-14.506667 49.929481-43.633778 82.507852-1.554963 1.744593 33.659259 14.468741 43.633778 41.642667 9.557333 26.017185 28.141037 67.26163-93.487407 80.213333-71.35763 7.585185-122.936889-38.020741-128.075852-37.584593-9.53837 0.83437-5.290667 0-15.530667 0-8.38163 0-8.931556 0.606815-16.820148 0-2.161778-0.170667-25.884444 37.584593-131.963259 37.584593-82.223407 0-103.518815-51.749926-86.983111-80.213333 16.535704-28.463407 44.126815-36.750222 40.239407-41.263407-19.152593-22.186667-32.350815-45.909333-40.239407-67.356444-1.953185-5.347556-3.584-10.543407-4.873481-15.530667-2.996148-11.45363-25.884444 67.204741-50.460444 49.038222-24.576-18.166519-22.376296-64.417185-6.46637-108.676741 16.042667-44.619852 56.471704-87.589926 56.926815-97.071407 1.611852-35.290074-3.489185-41.14963 0-50.422519 7.755852-20.764444 17.199407-12.8 17.199407-23.570963 0-135.736889 100.864-245.76 225.28-245.76s225.28 110.042074 225.28 245.76c0 5.195852 13.520593 0 19.986963 23.570963 1.327407 4.873481 2.23763 23.665778 0.663704 50.422519-0.739556 12.856889 34.266074 28.501333 52.375704 97.071407C828.434963 628.754963 810.30637 661.105778 801.261037 668.86163z" fill="#68A5E1" p-id="760">
                </path>
              </svg>
                <a style=' margin-left:5px'>
                  QQ登录
                </a>
            </div>
          </div>
        </div>
      </div>
      <img class="zhu00"src="/src/assets/login/zhu00.png" >
      <img class="zhuleft"src="/src/assets/login/zhu.png" >
      <img class="zhubian01"src="/src/assets/login/zhubian01.png" >
      <img class="zhubian"src="/src/assets/login/zhubian.png" >

</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
let form = reactive({
  account:'',
  password:''
})
let login =ref()
const emit = defineEmits(['login_off_new'])
const open_card=()=>{
  login.value=true
}

defineExpose({open_card})
</script>
<style scoped>
.el-dialog .loginbutton01{
  width: 39%;
  border-radius: 5px;
  color: rgb(72, 72, 72);
  border: 1px solid rgb(217, 217, 217); 
  background-color: white;
}
.el-dialog .loginbutton01:hover{
  color: rgb(72, 72, 72);
  border: 1px solid rgb(217, 217, 217); 
  background-color: rgb(243, 243, 243);
}
</style>